<html>
<head>
    <title>工作咩闹钟</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="main-container">
    <div class="linemode">
        <img src="/favicon.ico"><br><br>
        <h1 class="me-title">工作咩闹钟</h1>
    </div>
    <div class="linemode" id="statusMsg">&nbsp;</div>
    <div class="linemode ctrlbox">
        <div class="linemode">
            <form action="/stop">
                <button type="submit">停止</button>
            </form>
            <form action="/pause">
                <button type="submit">暂停</button>
            </form>
            <form action="/resume">
                <button type="submit">恢复播放</button>
            </form>
        </div>
        <div class="linemode">
            <form action="/volm">
                <button type="submit">音量减</button>
            </form>
            <form action="/volp">
                <button type="submit">音量加</button>
            </form>
            <form action="/prev">
                <button type="submit">上一首</button>
            </form>
            <form action="/next">
                <button type="submit">下一首</button>
            </form>
        </div>
    </div>
    <form action="/play" id="playUrlForm" onsubmit="return playurl()">
        <button type="submit">播放url</button>
        <input type="text" name="url" id="playUrl" value="http://127.0.0.1:8080/static/music.mp3">
    </form>
    <form action="/playlist" onsubmit="return plalist()">
        <button type="submit">播放歌单/歌曲</button>
        <input type="text" name="id" id="playlistId" placeholder="歌单id或分享链接" value="21777546">
        <select name="random">
            <option value="0">顺序播放</option>
            <option value="1">随机播放</option>
        </select>
    </form>
    <form action="/timeStop" id="timeStopForm">
        <button type="submit">定时停止</button>
        <input type="text" name="min" id="timeStop" value="30.0"> 分钟后
    </form>
    <div>
        <a href="/restart">重启</a> <a href="/alarm.html" style="margin-left: 20px">闹钟设置</a>
    </div>
    </div>
    <script>
        function plalist() {
            var pl = document.getElementById('playlistId').value
            var m = /playlist\?id=(\d+)/.exec(pl);
            if (m) {
                // 歌单分享链接
                document.getElementById('playlistId').value = m[1];
                localStorage.setItem('lastPlayList', m[1]);
            } else {
                var m = /song\?id=(\d+)/.exec(pl);
                if (m) {
                    // 歌曲分享链接
                    document.getElementById('playUrl').value = "http://music.163.com/song/media/outer/url?id=" + m[1];
                    document.getElementById('playUrlForm').submit();
                    return false
                } else {
                    localStorage.setItem('lastPlayList', pl);
                }
            }
            return true;
        }
        function playurl() {
            localStorage.setItem('lastPlayUrl', document.getElementById('playUrl').value);
        }
        // 状态信息
        function getStatus() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/status?t=' + Date.now(), true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var d = JSON.parse(xhr.responseText);
                    var msg = (d.batLevel ? '电量 ' + d.batLevel.trim() + '%<br>' : '')
                    + (d.stopUnix ? '将在 ' + new Date(d.stopUnix*1000).toLocaleString('af').split(' ')[1] + ' 后停止<br>' : '')
                    + (d.skipAlarm ? '将跳过 ' + d.skipAlarm + ' 次闹钟<br>' : '')
                    + (d.isStop ? '已停止播放' : (d.isAlarm ? '闹钟 ' : '')
                    + (d.playList && d.playList.length > 0 ? '待播放 '+d.playList.length + ' 首 ' : '')
                    + (d.nowId ? '<a href="https://music.163.com/#/song?id=' + d.nowId + '">正在播放</a>' : d.nowUrl ? '<a href="' + d.nowUrl + '">正在播放</a>' : ''));
                    document.getElementById('statusMsg').innerHTML = msg;
                }
            }
            xhr.send();

            var lastPlayUrl = localStorage.getItem('lastPlayUrl')
            if (lastPlayUrl) {
                document.getElementById('playUrl').value = lastPlayUrl
            }
            var lastPlayList = localStorage.getItem('lastPlayList')
            if (lastPlayList) {
                document.getElementById('playlistId').value = lastPlayList
            }
        }
        window.onload = getStatus;
        // window.onfocus = getStatus;
        window.onpageshow = function(event) {
            if (event.persisted || window.performance && window.performance.navigation.type == 2) {
                getStatus();
            }
        }
    </script>
</body>
</html>
